/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')
// const remark = require('remark')
module.exports = {
  darkMode: 'class',
  // purge是用来清除项目中不需要的css样式
  purge: {
    // 手动控制是否应该删除未使用的样式
    enabled: true,
    // 匹配需要解析处理的文件
    content: ['./src/**/*.{html,md}', './src/**/*.vue', './src/**/*.jsx'],
    // 设置顶级选项： 永远不会从您的 CSS 中意外删除的类名
    safelist: [
      // 'bg-blue-500',
      // ...
    ],
    // 如将md文件编译为html的功能 需要先将md编译为html再处理 这样会比较精确
    transform: {
      //   md: (content) => {
      //     return remark().process(content)
      //   }
    },
    // 自定义规则来解析文件（如md文件）基本上purgeCss自带的规则完全够用 不需要单独设置
    extract: {
      // md: (content) => {
      //   return content.match(/[^<>"'`\s]*/)
      // }
    },
    // 默认情况下，Tailwind 将清除基础层组件层、应用程序层中的所有样式
    // 如果您想更改此设置，请使用图层选项手动指定您想要清除的图层
    // layers: ['components', 'utilities'],

    // 配置见：https://purgecss.com/configuration.html#options
    options: {
      // 默认情况下，PurgeCSS 不会删除未使用的 @keyframes 规则，
      // 默认是false 不删除 true删除与动画相关的样式
      keyframes: true,
      safelist: []
      // ...
    }
    // 设置想保留的类 或者 设置不想保留的类
    // corePlugins: ['margin', 'padding']

    // 需要一个功能类，但不需要响应式版本，将其变体设置为空数组，以减少 83% 的类生成。
    // variants: {
    //   appearance: []
    // }
  },
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [
    plugin(function ({ addBase, theme }) {
      // 第二种方式设置基础样式
      addBase({
        // h1: { fontSize: theme('fontSize.2xl') },
        // h2: { fontSize: theme('fontSize.xl') },
        // h3: { fontSize: theme('fontSize.lg') }
      })
    })
  ]
}
